<template>
    <div class="saleDtail-container">
      <div class="saleContent">
        <el-form :inline="true"  class="demo-form-inline single-form-inline" size="small">
          <el-radio-group  size="small" v-model="selectMonth" @change="timeSelect">
            <el-radio-button label="lastQuarter">最近3个月</el-radio-button>
            <el-radio-button label="lastMonth">最近1个月</el-radio-button>
          </el-radio-group>
          <el-form-item >
            <el-date-picker @change="daterange" v-model="productType" type="daterange" size="small"
                            align="center" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="品类">
            <el-select v-model="categoryId" placeholder="分类" style="width: 156px;"  size="small" @change="sortTopDataS">
              <el-option v-for="(item,index) in catagoryData" :key="index" :label="item" :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="型号">
            <el-select v-model="productId" placeholder="分类" style="width: 156px;"  size="small" @change="sortTopData">
              <el-option v-for="(item,index) in productData" :key="index" :label="item" :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <circle-compent :detailCatagrayCount="detailCatagrayCount" :detailProductCount="detailProductCount"
                      :detailOnLine="detailOnLine" :detailOffLine="detailOffLine" :titleName="titleName"></circle-compent>
      <div class="tableContainer saleContent">
        <el-table :data="results" style="width: 100%" size="mini">
          <el-table-column
            type="index"
            width="80px"
            label="序号">
          </el-table-column>
          <el-table-column
            prop="categoryName"
            label="品类">
          </el-table-column>
          <el-table-column
            prop="productCode"
            label="产品型号">
          </el-table-column>
          <el-table-column
            prop="averagePrice"
            sortable
            label="店铺/终端零售价(元)">
          </el-table-column>
          <el-table-column
            sortable
            prop="salesAmount"
            :formatter="formatterPrice"
            label="销售额(万元)">
          </el-table-column>
          <el-table-column
            sortable
            prop="salesCount"
            label="销售量(件)">
          </el-table-column>
          <!--<el-table-column-->
          <!--sortable-->
          <!--prop="percentage"-->
          <!--label="市场占有率">-->
          <!--</el-table-column>-->
        </el-table>
        <div class="paginationSet">
          <div class="pagination-container">
            <div class="toStart" @click="setCurrentPage">首页</div>
            <el-pagination background layout="prev, pager, next" :total="page"
                           @current-change="pageChange" :current-page.sync="currentPage">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import CircleCompent from 'router/marketSale/compentSet/circleCompent'
    import * as opreator from 'api/getData'

    export default {
      name: "sale-detail",
      components:{
        CircleCompent,
      },
      props:['channelId'],
      data(){
          return{
            results:[],
            productId:'全部',
            productData:['全部'],
            categoryId:'全部',
            catagoryData:['全部'],
            detailCatagrayCount: '',
            detailProductCount: '',
            detailOnLine: '',
            detailOffLine: '',
            titleName:[
              '品类数（个）',
              '型号数（个）',
              '销售量（万件）',
              '销售额（万元）'
            ],
            selectMonth:'lastQuarter',
            productType:'',
            currentPage:1,
            page:1
          }
      },
      mounted(){
        this.getDataInfo('lastQuarter')
        this.allC()
        this.allP()
      },
      methods:{
        formatterPrice(row, column){
          return parseFloat((row.salesAmount || 0)/10000).toFixed(2)
        },
        sortTopDataS(val){
          this.allP(val)
          this.sortTopData()
        },
        sortTopData(val){
          this.getDataInfo(this.productType[0] ? this.productType[0]: this.selectMonth,this.productType[1],this.categoryId=='全部' ? undefined:this.categoryId,this.productId == '全部' ? undefined:this.productId)
        },
        timeSelect(val){
          this.productType = ''
          this.getDataInfo(val,undefined,this.categoryId=='全部' ? undefined:this.categoryId,this.productId == '全部' ? undefined:this.productId)
        },
        allP(cName){
          let param ={ channelId:this.channelId, categoryName:cName == '全部'? undefined : cName }
          opreator.onlineCode(param).then(res => {
            this.productData = ['全部', ...res.data]
          })
        },
        allC(){
          opreator.onlineCategory({channelId:this.channelId}).then(res => {
            this.catagoryData = ['全部', ...res.data]
          })
        },
        getDataInfo(start,end,category,pcode){
          let param = {
            firstTime:start,
            lastTime:end,
            channelId:this.channelId,
            productCode:pcode,
            categoryName:category,
            pageNumber:this.currentPage
          }
          opreator.onlineDetail(param).then(res => {
            if('200' == res.code){
              this.results = res.data.pageOnline.list || []
              this.page = res.data.pageOnline.totalRecord
              this.detailCatagrayCount = res.data.categoryNumber
              this.detailProductCount = res.data.productCodeNumber
              this.detailOnLine = (res.data.totalSalesCount/10000).toFixed(2)
              this.detailOffLine = (res.data.totalSalesAmount/10000).toFixed(2)
            }else {
              this.$message.error('系统查询出错，请稍后再试')
            }
          })
        },
        daterange(newVal){
          this.selectMonth = ''
          this.getDataInfo(this.productType[0],this.productType[1],this.categoryId=='全部' ? undefined:this.categoryId,this.productId == '全部' ? undefined:this.productId)
        },
        pageChange(){
          this.getDataInfo(this.productType[0] ? this.productType[0]: this.selectMonth,this.productType[1],this.categoryId=='全部' ? undefined:this.categoryId,this.productId == '全部' ? undefined:this.productId)
        },
        setCurrentPage(){
          this.currentPage = 1
          this.pageChange()
        }
      },
      watch:{
        channelId(newVal){
          this.getDataInfo('lastQuarter')
        }
      }
    }
</script>

<style scoped>
  .saleContent{
    padding: 20px;
    box-sizing: border-box;
  }
</style>
